import 'package:flutter/material.dart';

class Product {
  final String title;
  final String desc;
  Product (this.title, this.desc);
}

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '导航跳转',
      home: ProductPage(
        products: List.generate(30, (i) =>
          Product('商品 ${i+1}', '这是第 ${i+1} 个商品')
        )
      ),
    );
  }
}

//产品列表页面
class ProductPage extends StatelessWidget {
  final List<Product> products;
  const ProductPage({Key? key, required this.products}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('商品列表界面'),
      ),
      body: ListView.builder(
        itemCount: products.length,
        itemBuilder: (context, i) {
          return Column(
            children: [
              ListTile(
                title: Text(products[i].title),
                subtitle: Text(products[i].desc),
                leading: Icon(Icons.shop),
                onTap: () {
                  Navigator.push(context, MaterialPageRoute(
                    builder: (context)=> ProductDetail(item:products[i]))
                  );
                },
              ),
              Divider()
            ],
          );
        }
      ),
    );
  }
}

class ProductDetail extends StatelessWidget {
  final Product item;
  const ProductDetail({Key? key, required this.item}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('商品: ${item.title}'),
      ),
      body: Center(
        child: Column(
          children: [
            Row(
              children: [
                Text('商品名称：', style: TextStyle(
                    color: Colors.cyan,
                    fontSize: 20.0
                  ),
                ),
                Text(item.title)
              ],
            ),
            Row(
              children: [
                Text('商品详情：', style: TextStyle(
                    color: Colors.cyan,
                    fontSize: 16.0
                  ),
                ),
                Text(item.desc)
              ],
            )
          ],
        ),
      ),
    );
  }
}